<template>
  <div class="todo-list">
    <h1>todolist</h1>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="">
        <el-input class="input" v-model="form.value" placeholder="请输入关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-dropdown split-button type="primary" @click="onSubmit" @command="dropdownChange">
          {{btnText}}
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :command='1'>添加</el-dropdown-item>
              <el-dropdown-item :command='2'>搜索</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-form-item>
    </el-form>
    <div style="text-align: right; marign: 20px 0">
      <el-radio-group v-model="type" @change="radioChange" size="medium">
        <el-radio-button :label='0'>全部</el-radio-button>
        <el-radio-button :label="1">已完成</el-radio-button>
        <el-radio-button :label="2">未完成</el-radio-button>
      </el-radio-group>
    </div>
    <h3 style='text-align: left'>任务列表:</h3>
    <div class="list" v-if="list.length">
      <item v-for="(item, index) in list" :key="index" :item=item :index="index"></item>
    </div>
    <el-empty v-else description="暂无数据"></el-empty>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import Item from '@/components/Item.vue'
import { useStore, mapState } from 'vuex'
export default defineComponent({
  components: { Item },
  computed: mapState('TodoList', ['list']),
  setup () {
    const store = useStore()
    const form = ref({
      value: ''
    })
    const type = ref(0)
    const command = ref(1)
    const btnText = computed(() => command.value === 1 ? '添加' : '搜索')
    const dropdownChange = (value: number) => {
      command.value = value
    }
    const onSubmit = () => {
      if (command.value === 1) {
        onAdd()
      } else {
        onSearch()
      }
    }
    const onAdd = () => {
      if (!form.value.value || !form.value.value.length) {
        ElMessage.error('点你妈，字呢？')
        return
      }
      store.commit('TodoList/ADDTASK', form.value.value)
      form.value.value = ''
    }
    const onSearch = () => {
      store.commit('TodoList/SEARCH', form.value.value)
    }
    const radioChange = (value: number) => {
      store.commit('TodoList/TYPECHANGE', value)
    }
    return {
      form,
      type,
      onSubmit,
      dropdownChange,
      command,
      btnText,
      radioChange
    }
  }
})
</script>

<style lang="scss" scoped>
.h1 {
  color: $red;
}
.todo-list {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.input {
  width: 500px;
}
</style>